<template>
  <view class="business-info-container">
    <!-- 顶部企业信息区域 -->
    <view class="header-section">
      <!-- 企业头部信息 -->
      <view class="company-header">
        <image :src="businessInfo.cover ? businessInfo.cover : defaultCover" class="company-cover" mode="aspectFill" />
      </view>
      
      <!-- 企业名称 -->
      <view class="company-name-container">
        <text class="company-name">{{ businessInfo.name }}</text>
      </view>
      
      <!-- 基本信息卡片 -->
      <view class="info-card">
        <view class="info-item">
          <text class="info-label">职称：</text>
          <text class="info-value">{{ businessInfo.position }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">联系人员：</text>
          <text class="info-value">{{ businessInfo.realname }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">联系电话：</text>
          <text 
            class="info-value contact-phone" 
            @tap="makePhoneCall"
            @longpress="copyContact"
          >
            {{ businessInfo.phone }}
          </text>
        </view>
        <view class="info-item">
          <text class="info-label">地址：</text>
          <text class="info-value">{{ businessInfo.address }}</text>
        </view>
        <view v-if="businessInfo.remark" class="info-item">
          <text class="info-label">备注：</text>
          <text class="info-value">{{ businessInfo.remark }}</text>
        </view>
        <view v-if="businessInfo.storeLink" class="info-item">
          <text class="info-label">商铺网站：</text>
          <text class="info-value store-link" @click="openStoreLink">
            {{ businessInfo.storeName || '访问店铺' }}
          </text>
        </view>
      </view>
    </view>

    <!-- 经营内容 -->
    <view class="section-card">
      <view class="section-header">
        <text class="section-title">经营内容</text>
        <view class="section-line"></view>
      </view>
      <view class="business-content">
        <text class="content-text">{{ businessInfo.business }}</text>
        <view class="business-tags" v-if="businessInfo.tags">
          <view v-for="(tag, index) in businessInfo.tags.split(',')" :key="index" class="business-tag">
            {{ tag }}
          </view>
        </view>
      </view>
    </view>

    <!-- 企业介绍 -->
    <view class="section-card">
      <view class="section-header">
        <text class="section-title">企业介绍</text>
        <view class="section-line"></view>
      </view>
      <view class="company-intro">
        <text class="intro-text">{{ businessInfo.content }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import ClanMember from "@/api/genealogy/conpany";

// 默认logo
const defaultCover = "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/c76cac7f6d9e4b06bb470645c38d336f.webp";

// 企业详细信息
const businessInfo = ref({
  id: "",
  familyId: "",
  name: "江西康华集团",
  cover: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/c76cac7f6d9e4b06bb470645c38d336f.webp",
  storeName: null,
  storeLink: null,
  realname: "李岗华",
  position: "总经理",
  phone: "15346444444",
  areaCode: null,
  address: "江西南昌青山湖区康华大厦",
  business: "家电销售，仓库租赁",
  tags: "",
  content: "集团创立于 1992 年，2002 年江西康华企业发展有限公司正式成立，经过多年发展，逐步形成多元化产业格局",
  remark: ""
});

// 拨打电话
const makePhoneCall = () => {
  uni.makePhoneCall({
    phoneNumber: businessInfo.value.phone,
  });
};

// 复制联系方式
const copyContact = () => {
  // 阻止事件冒泡，防止触发拨打电话
  uni.$emit('stopPropagation');
  
  uni.setClipboardData({
    data: businessInfo.value.phone,
    success: () => {
      uni.showToast({
        title: '联系方式已复制',
        icon: 'success'
      });
    }
  });
};

// 打开商铺网站
const openStoreLink = () => {
  if (businessInfo.value.storeLink) {
    // 确保链接有协议前缀
    let url = businessInfo.value.storeLink;
    if (!url.startsWith('http://') && !url.startsWith('https://')) {
      url = 'http://' + url;
    }
    
    uni.openURL({
      url: url,
      success: () => {
        console.log('打开商铺网站成功');
      },
      fail: (err) => {
        console.error('打开商铺网站失败:', err);
        uni.showToast({
          title: '打开商铺网站失败',
          icon: 'error'
        });
      }
    });
  }
};
// 获取企业详情
const getCompanyDetail = async (id: string) => {
  try {
    const res = await ClanMember.getCompanyDetail(id);
    if (res) {
      businessInfo.value = res;
    }
  } catch (error) {
    console.error("获取企业详情失败:", error);
  }
};

onMounted(() => {
  // 可以在这里获取路由参数并加载真实数据
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;

  if (options.id) {
    console.log("加载企业ID:", options.id);
    // 这里可以调用API获取真实数据
    getCompanyDetail(options.id);
  }
});
</script>

<style lang="scss" scoped>
.business-info-container {
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 头部区域 */
.header-section {
  background: linear-gradient(to bottom, #165dff, #d0deff);
  padding: 0 0 20rpx;
}

/* 企业封面 */
.company-cover {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
}

/* 企业名称 */
.company-name-container {
  padding: 0 30rpx 20rpx;
}

.company-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

/* 信息卡片 */
.info-card {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
  min-width: 140rpx;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
}

.contact-phone {
  color: #007aff;
  text-decoration: underline;
}

.store-link {
  color: #007aff;
  text-decoration: underline;
}

/* 通用卡片样式 */
.section-card {
  background: #fff;
  margin: 30rpx 30rpx 0;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.section-line {
  flex: 1;
  height: 2rpx;
  background: linear-gradient(90deg, #667eea, transparent);
}

/* 经营内容 */
.business-content {
  margin-top: 20rpx;
}

.content-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: block;
}

.business-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.business-tag {
  background: #f0f5ff;
  color: #1890ff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  border: 1rpx solid #d6e4ff;
}

/* 企业介绍 */
.company-intro {
  margin-top: 20rpx;
}

.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
  text-align: justify;
}
</style>
